<template>
  <div :style="styleObject" id="app">
    <router-view />
  </div>
</template>
<script>

import debounce from 'lodash.debounce'
export default {
  data () {
    return {
      width: 1920,
      height: 1080,
      scale: this.getScale()
    }
  },
  mounted () {
    this.getScale()
    window.addEventListener('resize', this.setScale)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.setScale)
  },

  computed: {
    styleObject () {
      const obj = {
        transformOrigin: 'top left',
        transition: 'transform 0.5s',
        transform: `translate(${this.scale.left}px, ${this.scale.top}px) scale(${this.scale.scale})`,
        WebkitTransform: `translate(${this.scale.left}px, ${this.scale.top}px) scale(${this.scale.scale})`,
        width: this.width + 'px',
        height: this.height + 'px'
      }
      return obj
    }
  },
  methods: {
    getScale () {
      const innerWidth = document.documentElement.clientWidth || document.body.clientWidth;
      const innerHeight = document.documentElement.clientHeight || document.body.clientHeight;
      // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
      const x = innerWidth / this.width
      const y = innerHeight / this.height
      const scale = Math.min(x, y)
      const left = (innerWidth - this.width * scale) / 2
      const top = (innerHeight - this.height * scale) / 2
      return { x, y, scale, left, top }
    },
    setScale: debounce(function () {
      // 获取到缩放比，设置它
      this.scale = this.getScale()
    }, 300)
  }
}
</script><style lang="scss">
#app {
  background: #ccc;
}
</style>
